.order-detail-page {
  background-color: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 120px;

  .status-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 30px 20px;
    color: white;
    
    .status-header {
      text-align: center;
      margin-bottom: 20px;
      
      .order-id {
        display: block;
        margin-top: 10px;
        font-size: 14px;
        opacity: 0.8;
      }
    }
    
    .pickup-code-section {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      
      .pickup-code-label {
        display: block;
        font-size: 14px;
        margin-bottom: 10px;
        opacity: 0.8;
      }
      
      .pickup-code {
        display: block;
        font-size: 32px;
        font-weight: bold;
        letter-spacing: 4px;
        margin-bottom: 10px;
      }
      
      .pickup-code-tip {
        display: block;
        font-size: 12px;
        opacity: 0.7;
      }
    }
  }

  .progress-section {
    background: white;
    margin: 20px;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    
    .section-title {
      display: block;
      font-size: 16px;
      font-weight: bold;
      color: #323233;
      margin-bottom: 20px;
    }
    
    .step-content {
      .step-title {
        display: block;
        font-size: 14px;
        font-weight: bold;
        color: #323233;
        margin-bottom: 4px;
      }
      
      .step-desc {
        display: block;
        font-size: 12px;
        color: #969799;
      }
    }
  }

  .action-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 20px;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
    
    .action-btn {
      margin-bottom: 10px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}